<template>
  <view class="page page-index" :style="rootStyle">
    <!-- S Body -->
    <view class="panel-body">
      <view class="component-list">
        <view class="component-list__item" @tap="callPhone">
          <text class="name">联系电话：13400000000</text>
          <text class="active">拨打</text>
        </view>

        <view class="component-list__item" @tap="copyWechat">
          <text class="name">微信：42534645646</text>
          <text class="active">复制</text>
        </view>
      </view>
    </view>
    <!-- E Body -->
    <panel no-padding :style="{ paddingBottom: '24px' }">
      <at-tab-bar
        fixed
        :tab-list="tabBars"
        :current="current4"
        @click="handleTabBarClick(4, $event)"
      />
    </panel>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, ref } from 'vue'
import Taro from '@tarojs/taro'
import './index.scss'
export default defineComponent({
  name: 'IndexPage',

  setup() {
    const tabBars = ref([
      { title: '首页', iconType: 'home' },
      { title: '联系我们', iconType: 'phone' }
    ])

    const activeTabBar = reactive({
      current4: 1
    })

    const rootStyle = computed(() => {
      const deviceWidth = Taro.getSystemInfoSync().windowWidth
      return Taro.getEnv() === Taro.ENV_TYPE.WEB
        ? {
            width: deviceWidth >= 1024 ? '75%' : '100%',
            margin: 'auto'
          }
        : null
    })

    function handleTabBarClick(num, value) {
      activeTabBar[`current${num}`] = value

      switch (value) {
        case 0:
          Taro.navigateTo({
            url: `/pages/index/index`
          })
          break

        case 1:
          Taro.navigateTo({
            url: `/pages/contactUs/index`
          })

        default:
          break
      }
    }

    function callPhone() {}

    function copyWechat() {}
    return {
      rootStyle,
      tabBars,
      handleTabBarClick,
      callPhone,
      copyWechat,
      ...toRefs(activeTabBar)
    }
  }
})
</script>

